import { onMounted, onUnmounted, ref, type Ref } from 'vue'
const useClickOutside = (
  elementRef: Ref<HTMLElement | null>,
  callback: () => void
) => {
  const isOutSide = ref(false)
  const handleClick = (e: MouseEvent) => {
    if (elementRef.value) {
      if (elementRef.value.contains(e.target as Element)) {
        isOutSide.value = false
      } else {
        isOutSide.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', handleClick)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handleClick)
  })
  return {
    isOutSide,
  }
}
export default useClickOutside
